<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动数据</title>
</head>
<body>
    <div class="app-motion">
        <!-- 上半部分 -->
        <div class="motion-top dpflex fdcolumn">
            <!-- 返回 -->
            <p class="motion-return">
                <i id="iconReturn" class="iconfont icon-return"></i>
            </p>
            <!-- 头像 -->
            <div class="motion-head dpflex">
                <p>我的运动数据</p>
                <div class="head">
                    <img id="userImgUrl" src="../imgs/user-img.jpg" alt="">
                </div>
            </div>
            <!-- 运动数据 -->
            <div class="motion-data dpflex">
                <div class="minutes dpflex fdcolumn">
                    <p>总运动</p>
                    <p><span id="times">99999</span>分钟</p>
                </div>
                <div class="kilocalorie dpflex fdcolumn">
                    <p>本周消耗</p>
                    <p><span class="calorie">99999</span>千卡</p>
                </div>
            </div>
            <!-- 时间统计 -->
            <div class="motion-time dpflex" style="padding-bottom: 14px;">
                <div class="consume dpflex fdcolumn">
                    <p>消耗(千卡)</p>
                    <p  class="calorie">99999</p>
                </div>
                <div class="cumulative dpflex fdcolumn">
                    <p>累计(天)</p>
                    <p class="punchin">999</p>
                </div>
                <div class="continuity dpflex fdcolumn">
                    <p>连续(天)</p>
                    <p  class="punchin">999</p>
                </div>
            </div>
        </div>

        <!-- 下半部分 -->
        <div class="motion-bottom dpflex fdcolumn">
            <div class="bottom-top" id="main1" style="width:370px;height: 300px;"></div>
            <div class="bottom-bottom" id="main2" style="width: 370px; height: 300px;"></div>
            <div class="bottom-three" id="main3" style="width: 370px; height: 300px;"></div>
            <div class="bottom-four" id="main4" style="width: 370px; height: 300px;"></div>
        </div>

    </div>
</body>
</html>